<template>
  <el-table v-loading="loading" :data="tableData" border style="width: 100%">
    <el-table-column
      prop="imageUrl"
      label="产品图片"
      width="180"
      align="center"
    >
      <template v-slot="{ row }">
        <el-avatar
          shape="square"
          :size="40"
          fit="scale-down"
          :src="row.imageUrl"
        ></el-avatar>
      </template>
    </el-table-column>
    <el-table-column
      prop="productName"
      label="产品名称"
      width="180"
      align="center"
    ></el-table-column>
    <el-table-column
      prop="description"
      label="订单描述"
      width="180"
      align="center"
    ></el-table-column>
    <el-table-column prop="price" label="价格" align="center"></el-table-column>
    <el-table-column
      prop="inventory"
      label="库存"
      align="center"
    ></el-table-column>
    <el-table-column prop=" " label="操作" align="center">
      <template v-slot="{ row }">
        <el-button
          v-isBuy="row.inventory"
          type="primary"
          @click="pre_order(row)"
        >
          充值
        </el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import { getproduct } from "@/api/pay";

export default {
  directives: {
    isBuy: {
      inserted(el, binding) {
        // console.log(el, binding);
        if (binding.value == 0) {
          let oldClassName = el.className;
          el.className = oldClassName + " is-disbaled";
          el.disabled = true;
        }
      },
    },
  },
  methods: {
    pre_order(row) {
      this.$confirm("充值中" + row.description, "购买提示", {
        type: "info",
      })
        .then(() => {
          this.$store.commit("SET_CURRENTPRODUCT", row);
          this.$router.push({ name: "preorder" });
        })
        .catch(() => {});
    },
  },
  created() {
    this.loading = true;
    getproduct().then((res) => {
      this.tableData = res.data.data;
    });
    this.loading = false;
  },
  meta: {
    title: "vipCharge",
    icon: "iconfont    icon-vip ",
  },
  data() {
    return {
      loading: true,
      tableData: [],
    };
  },
};
</script>

<style></style>
